<template>
  <div>
    <!-- 新增按钮 -->
    <el-card>
      <el-row type="flex" justify="end">
        <el-button type="success" size="small" @click="addFn">新增角色</el-button>
      </el-row>
    </el-card>
    <!-- 角色表格 -->
    <el-card class="role">
      <el-table style="width:98%" :data="rolesList" border>
        <el-table-column label="角色名称" prop="title" />
        <el-table-column label="角色描述" prop="description" />
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button type="primary" size="small" @click="assignFn(row.id)">分配权限</el-button>
            <el-button size="small" @click="editFn(row.id)">编辑</el-button>
            <el-button type="danger" size="small" @click="delFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center">
        <el-pagination layout="prev, pager, next" :total="total" :page-size="page.limit" @current-change="currentChange" />
      </el-row>
    </el-card>
    <!-- 新增角色的弹框 -->
    <add-role ref="role" :show-dialog.sync="visibleDialog" @update="getRolesList" />
    <!-- 分配权限弹窗 -->
    <assign-role ref="assignRole" :show-dialog.sync="showDialog" />
  </div>
</template>

<script>
import { getRoles, getRolesNum, delRoles } from '@/api/roles'
import addRole from './components/add-role.vue'
import assignRole from './components/assign-role.vue'
export default {
  components: { addRole, assignRole },
  data() {
    return {
      rolesList: [],
      page: {
        limit: 10, // 请求的数量
        start: 0 // 请求开始的位置
      },
      visibleDialog: false, // 是否打开新增和编辑弹窗
      total: 0, // 总的角色数量
      curPage: '',
      showDialog: false // 是否显示分配权限弹窗
    }
  },
  async created() {
    // 获取角色列表
    this.getRolesList()
  },
  methods: {
    // 分配权限
    assignFn(id) {
      // 显示弹框
      this.showDialog = true
      // 获取角色默认权限
      this.$refs.assignRole.getRolePermIds(id)
    },
    // 编辑角色按钮
    async editFn(id) {
      // 显示弹窗
      this.visibleDialog = true
      // 回显数据
      // const res = await getRoleDetailById(id)
      // console.log('角色详情', res)
      // this.formData = res.data
      // 在子组件中封装获取详情的接口，然后通过ref来调用
      this.$refs.role.getRoleDetail(id)
    },
    // 删除角色列表
    delFn(id) {
      // console.log(id)
      // 询问是否删除
      this.$confirm('提示', '您确定要删除这个角色嘛', () => {})
      this.$confirm('您确定要删除这个角色吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          // 点击确定按钮
          // 调用删除接口
          await delRoles(id)
          // 删除最后一页的最后一条数据的分页处理
          if (this.rolesList.length === 1 && this.page.start !== 0) {
            this.currentChange(this.curPage - 1)
          }
          // 刷新页面
          this.getRolesList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          // 取消按钮
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 分页功能
    currentChange(page) {
      this.curPage = page
      // console.log(page)
      // 算出后面页数第一条所开始的位置
      this.page.start = (page - 1) * this.page.limit
      // 重新刷新页面
      this.getRolesList()
    },
    // 新增角色
    addFn() {
      // 显示弹框
      this.visibleDialog = true
    },
    // 获取角色列表
    async getRolesList() {
      // this.rolesList = await getRoles()
      const res = await getRoles(this.page)
      // console.log('角色列表', res)
      this.rolesList = res.data
      // 如果直接把获取角色数量的函数写在created中会出现数据改变而分页却不会变的问题
      // 获取角色数量
      const result = await getRolesNum()
      // console.log('角色数量', result.data)
      this.total = result.data
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  margin: 15px 30px;
  .el-pagination {
    margin-top: 10px;
  }
}
</style>
